<template>
	<vCommonPage type="1" :title="$route.query.title+'-详情'" class="mzqdDetail">
		<div slot="customContent" class="content">
			<div class="topBox">
				<div class="topBoxName">患者：{{$store.state.user.userinfo.patientName}}</div>
				<div class="topBoxNo"><span v-show="code == 'zyqd'">住院号：{{$store.state.user.userinfo.inpatientId}}</span></div>
				<div class="topBoxProName" v-show="code == 'zyqd'">出院科室：{{$route.query.data.inDeptName}}</div>
				<div class="topBoxProName" v-show="code == 'mzqd'">就诊科室：{{$route.query.data.deptName}}</div>
			</div>
			<!-- <div class="tableBox" v-if="tableData.length>0">
				<el-table class="table" :header-cell-style="$tableTitleStye"
					:cell-style="{color:'#435C7A'}" :data="tableData"
					style="width: 100%;font-size: 2.028571rem;font-weight: 400;" :show-overflow-tooltip="true">
					<el-table-column type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
					<el-table-column prop="itemNo" label="项目编码" width="150"></el-table-column>
					<el-table-column prop="fcTypeName" label="费用名称" width="270"></el-table-column>
					<el-table-column prop="itemSpecs" label="规格" width="250"></el-table-column>
					<el-table-column prop="itemSum" label="数量"></el-table-column>
					<el-table-column prop="itemPrice" label="单价"></el-table-column>
					<el-table-column prop="itemSum" label="总额"></el-table-column>
				</el-table>
			</div> -->
			<div v-if="$route.query.code == 'mzqd'">
				<div class="tableBox" v-if="tableData.prescList.length>0  ">
					<el-table :data="tableData.prescList" class="table" :header-cell-style="$tableTitleStye"
						:cell-style="{color:'#435C7A'}" style="width: 100%;font-size: 2.028571rem;font-weight: 400;"
						:show-overflow-tooltip="true">
						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="demo-table-expand">
									<el-table :data="props.row.itemList" class="table"
										:header-cell-style="$tableTitleStye" :cell-style="{color:'#435C7A'}"
										style="width: 100%;font-size: 2.028571rem;font-weight: 400;"
										:show-overflow-tooltip="true">
										<el-table-column type="index" label="序号" width="100"></el-table-column>
										<el-table-column prop="itemName" label="费用项目名称" width="200"></el-table-column>
										<el-table-column prop="itemUnit" label="规格" width="200"></el-table-column>
										<el-table-column prop="itemAmount" label="数量"></el-table-column>
										<el-table-column prop="itemFee" label="单价" width="150"></el-table-column>
										<el-table-column prop="subtotal" label="费用小计" width="150"></el-table-column>
									</el-table>
								</el-form>
							</template>
						</el-table-column>
						<el-table-column label="费用类别" prop="type">
						</el-table-column>
						<el-table-column label="费用总计" prop="totalFee">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div v-if="$route.query.code == 'zyqd'">
				<div class="tableBox" v-if="tableData.feeItems.length>0">
					<el-table :data="tableData.feeItems" class="table" :header-cell-style="$tableTitleStye"
						:cell-style="{color:'#435C7A'}" style="width: 100%;font-size: 2.028571rem;font-weight: 400;"
						:show-overflow-tooltip="true">
						<el-table-column label="费用类别" prop="fcTypeName">
						</el-table-column>
						<el-table-column label="费用总计(元)" prop="expenseAmount">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<vFindNot v-if="tableData.length==0"></vFindNot>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
				<div class="bottomTotal" v-if="$route.query.code == 'mzqd'">费用总计：<span class="red">￥{{mzData.fee}}</span></div>
				<div class="bottomTotal" v-if="$route.query.code == 'zyqd'">费用总计：<span class="red">￥{{tableData.totalPrice}}</span></div>
			</div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		getOutpatientListDetail,
		getInPatientListDetail
	} from "@api/apiBox/qdcx"
	export default {
		name: "mzqd",
		data() {
			return {
				tableData: [],
				mzData: [],
				code: '',
				totoalFee: 0
			};
		},
		methods: {
			payItem() {
				this.$router.push({
					name: 'mzcz',
					query: {
						title: "门诊缴费",
					}
				})
			},
			indexMethod(index) {
				return index + 1;
			},
			async searchMzqdDetail() {
				let data = {
					data: {
						visitId: this.mzData.visitId,
						patientId: this.$store.state.user.userinfo.patientId //患者ID
					},
					that: this
				};
				const res = await getOutpatientListDetail(data);
				this.tableData = res.data;
				// for(let item of this.tableData){
				// 	this.totoalFee += parseInt(item.sumPrice);
				// }
			},
			async searchZyqdDetail() {
				let data = {
					data: {
						// beginDate: this.mzData.beginDate,
						// endDate: this.mzData.endDate,
						// idNo: this.$store.state.appointment.cardNo, //身份证号码  患者编号 卡号
						// inPatientId: this.$store.state.user.userinfo.patientId ,//患者ID
						patientId:this.mzData.inPatientId,
						medicalRecordId: this.mzData.medicalRecordId
						// idNo:530325199411162185
					},
					that: this
				};
				const res = await getInPatientListDetail(data);
				this.tableData = res.data;

			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			console.log(this.$store.state)
			this.mzData = this.$route.query.data;
			console.log(this.mzData, 'this.mzData')
			this.code = this.$route.query.code;
			if (this.code == 'mzqd') {
				this.searchMzqdDetail();
				this.tableDatas = this.tableDatasS;
			}
			if (this.code == 'zyqd') {
				this.searchZyqdDetail();
			}
		}
	};
</script>
<style rel="stylesheet/scss" scoped lang="scss">
	.flex {
		display: flex;
	}

	.red {
		color: #FE5F5F;
	}

	.hui {
		color: #A1ADBB;
	}

	.deepHui {
		color: #435C7A;
	}

	.blueBottom {
		width: 132px;
		height: 90px;
		background: #57A8FF;
		border-radius: 6px;
		display: flex;
		margin-left: 0px;
		margin-right: 20px;
		/*实现垂直居中*/
		align-items: center;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.totalPay {
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		margin-left: 300px;
		padding-top: 20px;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.title {
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		margin-top: 12px;
		text-align: right;
		margin-bottom: 0rem;
	}

	.elBtn {
		font-size: 2.5vw;
	}

	.table {
		margin-top: 30px;
	}

	@media  (min-height: 0px) and (max-height: 1910px) {
		
		.tableBox {
			margin-top: 15px;
			max-height: 600px;
			overflow: auto;
			overflow-x: hidden;
			borderRadius: '8px 8px 0px 0px';
		}
	
	 }
	  
	 @media  (min-height: 1919px)  {
		 
		 .tableBox {
		 	margin-top: 15px;
		 	max-height: 550px;
		 	overflow: auto;
		 	overflow-x: hidden;
		 	borderRadius: '8px 8px 0px 0px';
		 }
	
	 }
    



	.blueBottom {
		width: 132px;
		height: 90px;
		background: #57A8FF;
		border-radius: 6px;
		display: flex;
		/*实现垂直居中*/
		align-items: center;
	}

	.pageBox {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		font-size: 3.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		/*实现垂直居中*/
		align-items: center;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.topBox {
		display: flex;
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;

		.topBoxName {
			width: 328px;
		}

		.topBoxNo {
			width: 322px;

		}

		.topBoxProName {
			text-align: right;
			width: 358px;
		}
	}

	.bottomTotal {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		position: fixed;
		right: 38px;
		bottom: 52px;


	}
</style>
<style>
	.mzqdDetail .el-table__expand-icon {
		font-size: 18px;
	}
	.mzqdDetail .el-main{
		overflow: none !important;
		padding:3rem;
	}
</style>
